<template>
  <div>
    <div v-if="loading" class="loading"><van-loading class="load-icon" size="20px" type="spinner" /><span>拼命加载中...</span></div>
    <div class="address">
      <div v-for="(address,index) in addressList" :key="address.user_address_id" class="address_list">
        <div class="address_list_top" @click="clickToChooseAddress(index)">
          <div class="txt1">
            <span>{{ address.address_name }}</span>
            <span v-if="address.address_mobile">{{ address.address_mobile }}</span>
            <span v-else>{{ address.address_tel }}</span>
          </div>
          <div class="txt2">
            {{ address.address_address }}
          </div>
        </div>
        <div class="address_list_bottom">
          <div class="btns">
            <div class="default" @click="setDefaultAddress(address)">
              <div v-if="address.is_default == 1">
                <svg-icon class="icon" icon-class="icon_default" />
                <span class="txt">默认地址</span>
              </div>
              <div v-else>
                <svg-icon class="icon" icon-class="icon_default_no" />
                <span class="txt">设为默认</span>
              </div>
            </div>
            <a class="btn fr" @click="deleteAddress(address)"><svg-icon class="icon" icon-class="icon_delete" />删除</a>
            <a class="btn fr" @click="editAddress(address)"><svg-icon class="icon" icon-class="icon_edit" />编辑</a>
          </div>
        </div>
      </div>
      <!-- todo:nodata-->
      <div v-if="addressList.length == 0 && !loading" class="noData">
        <div class="content">
          <img src="../../../assets/images/noData/noDataAddress.png" alt="">
          <div class="text">暂无地址信息</div>
        </div>
      </div>
      <div class="bottom-btn">
        <div class="btnBg" @click="addAddress">新增地址</div>
      </div>
    </div>
  </div>
</template>

<script>
import { GetUserAddressList, putDelUserAddress, putSetUserAddressDefault } from '@/api/user'
export default {
  name: 'Index',
  data() {
    return {
      loading: false,
      addressList: [],
      checkbox2: []
    }
  },
  created() {
    this.getUserAddressList()
  },
  methods: {
    // 获取地址列表
    getUserAddressList() {
      this.loading = true
      GetUserAddressList().then(res => {
        this.loading = false
        const data = res.data
        if (data.status_code === 200) {
          this.addressList = data.list
        }
      })
    },
    // 删除接口
    delUserAddress(data) {
      this.$toast.loading({
        duration: 1000,
        mask: true,
        message: '正在提交...'
      })
      putDelUserAddress(data).then(res => {
        this.$toast.clear()
        const data = res.data
        if (data.status_code === 200) {
          this.$toast.success({
            message: data.message,
            duration: 1500
          })
          this.getUserAddressList()
        } else {
          this.$toast.fail({
            message: data.message,
            duration: 1500
          })
        }
      })
    },
    // 设为默认
    setDefaultAddress(data) {
      this.$toast.loading({
        duration: 1000,
        mask: true,
        message: '正在提交...'
      })
      putSetUserAddressDefault(data).then(res => {
        this.$toast.clear()
        const data = res.data
        if (data.status_code === 200) {
          this.$toast.success({
            message: data.message,
            duration: 1500
          })
          this.getUserAddressList()
        } else {
          this.$toast.fail({
            message: data.message,
            duration: 1500
          })
        }
      })
    },
    // 新增地址
    addAddress() {
      this.$router.push({
        name: 'add-address',
        query: { type: this.$route.query.type ? this.$route.query.type : '' }
      })
    },
    // 编辑地址
    editAddress(data) {
      const dataStr = JSON.stringify(data)
      this.$router.push({
        name: 'edit-address',
        query: {
          address: dataStr,
          type: this.$route.query.type ? this.$route.query.type : ''
        }
      })
    },
    // 删除地址
    deleteAddress(data) {
      this.$dialog.confirm({
        title: '温馨提示',
        message: '确认要删除当前地址信息?',
        showConfirmButton: true,
        showCancelButton: true
      }).then(() => {
        this.delUserAddress(data)
      }).catch(() => {
        this.$toast.fail('取消删除')
      })
    },
    // 结算页选择地址
    clickToChooseAddress(index) {
      if (Number(this.$route.query.type) === 1) {
        this.$store.state.address = this.addressList[index]
        console.log(this.$store.state.settlementData)
        this.$router.push({ name: 'shop-settlement', query: {
          itemData: JSON.stringify(this.$store.state.settlementData)
        }})
      }
    }
  }
}
</script>

<style scoped lang="scss">
  @import "src/styles/mixin.scss";
  .address{
    /*padding-bottom: pxCalc(70px);*/
    .address_list{
      background: #fff;
      padding-left: pxCalc(20px);
      box-shadow: 0 pxCalc(2px) pxCalc(8px) #e4e1e1;
      margin-bottom: pxCalc(10px);
      .address_list_top{
        border-bottom: pxCalc(1px) solid #e5e5e5;
        padding: pxCalc(10px) 0;
        &:active{
          /*background: #eee;*/
        }
        .txt1{
          font-size: 16px;
          color: #363b43;
        }
        .txt2{
          color: #999999;
          font-size: pxCalc(13px);
        }
      }
      .address_list_bottom{
        line-height: 38px;
        height: 38px;
        .btns{
          .default{
            display: inline-block;
            .txt{
              font-size: pxCalc(13px);
              color: #666666;
            }
            .icon{
              font-size: pxCalc(16px);
              vertical-align: pxCalc(-3px);
              margin-right: pxCalc(2px);
            }
          }
          .btn{
            font-size: pxCalc(13px);
            margin-right: pxCalc(20px);
            color: #666666;
            .icon{
              color: #bbbbbb;
              margin-right: pxCalc(4px);
            }
          }
        }
      }
    }
  }
</style>
